<template>
    <n-menu :options="menuOptions"
            :default-expand-all = "true"
            :value="activeIndex"
    />

</template>
<script lang="ts" setup>
import {h, Component, computed} from 'vue'
import { NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import { RouterLink } from 'vue-router'
import {
    BookOutline as BookIcon,
    FileTrayFullOutline as FileIcon,
    FilmSharp as FilmIcon,
    AppsSharp as AppsIcon,
    Image as ImageIcon,
    VolumeHigh as VolumeIcon,
    FileTrayStackedSharp as FileTrayStackedIcon,
    TrashBin as TrashBinIcon,
    GitNetworkSharp as GitNetworkIcon,
} from '@vicons/ionicons5'
import router from "@/router";

function renderIcon (icon: Component) {
    return () => h(NIcon, null, { default: () => h(icon) })
}

const activeIndex = computed(() => {
    return String(router.currentRoute.value.query.fileType==null?0:router.currentRoute.value.query.fileType)
})
const menuOptions: MenuOption[] = [
    {
        label: '我的文件',
        key: 'dance-dance-dance',
        icon: renderIcon(BookIcon),
        collapsed: false,
        children: [
            {
              label: () =>
                  h(
                      RouterLink,
                      {
                        to: {
                          name: 'CloudPan',
                          query: {
                            fileType: '0',
                            filePath: '/'
                          }
                        }
                      },
                      { default: () => '全部' }
                  ),
                key: '0',
                icon: renderIcon(AppsIcon)
            }, {
              label: () =>
                h(
                    RouterLink,
                    {
                      to: {
                        name: 'CloudPan',
                        query: {
                          fileType: '1'
                        }
                      }
                    },
                    { default: () => '图片' }
                ),
                key: '1',
                icon: renderIcon(ImageIcon)
            }, {
              label: () =>
                h(
                    RouterLink,
                    {
                      to: {
                        name: 'CloudPan',
                        query: {
                          fileType: '2'
                        }
                      }
                    },
                    { default: () => '文档' }
                ),
                key: '2',
                icon: renderIcon(FileIcon)
            },{
             label: () =>
                h(
                    RouterLink,
                    {
                      to: {
                        name: 'CloudPan',
                        query: {
                          fileType: '3'
                        }
                      }
                    },
                    { default: () => '视频' }
                ),
                key: '3',
                icon: renderIcon(FilmIcon)
            }, {
              label: () =>
                h(
                    RouterLink,
                    {
                      to: {
                        name: 'CloudPan',
                        query: {
                          fileType: '4'
                        }
                      }
                    },
                    { default: () => '音乐' }
                ),
                key: '4',
                icon: renderIcon(VolumeIcon)
            }, {
              label: () =>
                h(
                    RouterLink,
                    {
                      to: {
                        name: 'CloudPan',
                        query: {
                          fileType: '5'
                        }
                      }
                    },
                    { default: () => '其他' }
                ),
                key: '5',
                icon: renderIcon(FileTrayStackedIcon)
            }
        ]
    },
    // {
    //   label: () =>
    //       h(
    //           RouterLink,
    //           {
    //               to: {
    //                   name: 'CloudPan',
    //                   query: {
    //                     fileType: '6'
    //                   }
    //               }
    //           },
    //           { default: () => '回收站' }
    //       ),
    //     key: '6',
    //     icon: renderIcon(TrashBinIcon)
    // } ,
    // {
    //     label: () =>
    //         h(
    //             RouterLink,
    //             {
    //                 to: {
    //                     name: 'CloudPan',
    //                     query: {
    //                         fileType: '8',
    //                         filePath: '/'
    //                     }
    //                 }
    //             },
    //             { default: () => '我的分享' }
    //         ),
    //     key: '7',
    //     icon: renderIcon(GitNetworkIcon)
    // }
]
</script>


